<div class="m-wizard m-wizard--4 m-wizard--brand m-wizard--step-between" [class._m-wizard-sm]="sm">
  <div class="m-wizard__head head">
    <div class="m-wizard__nav">
      <div class="m-wizard__steps">
        <ng-container *ngFor="let step of dataSource; let index = index">
          <div
            class="m-wizard__step"
            [class.m-wizard__step--current]="value === index"
            [class.m-wizard__step--done]="value > index && !step.invalid"
            [class.m-wizard__step--undone]="value > index && step.invalid"
          
          >
            <div class="m-wizard__step-info">
              <a class="m-wizard__step-number" *ngIf="!sm">
                <span>
                  <span>{{ index + 1 }}</span>
                </span>
              </a>
              <div class="m-wizard__step-label ml-3">{{ step?.title || step }}</div>
              <div class="m-wizard__step-icon">
                <i class="la la-check"></i>
                <i class="la la-close"></i>
              </div>
            </div>
          </div>
          <ng-container *ngIf="step?.children">
            <m-wizard-stepper
              [sm]="true"
              [dataSource]="step.children"
              [value]="value > index ? step.children.length : value === index ? child : -1"
              (valueChange)="goto(index, $event)"
            ></m-wizard-stepper>
          </ng-container>
        </ng-container>
      </div>
    </div>
  </div>
</div>
